<template>
	<view class="page-body">
		<view class="topTabBar" >
			<view class="grid" v-for="(grid,tbIndex) in orderType" :key="tbIndex" @tap="showType(tbIndex)">
				<view class="text" :class="[tbIndex==tabbarIndex?'on':'']">{{grid.name}}</view>
			</view>
		</view>
		<swiper :current="tabbarIndex" class="swiper-box goods" :duration="300" @change="changeTab" >
			<swiper-item v-for="(orderItem,index) in orderType" :key="index"  :class="['swiper-item',tabbarIndex==index?'fadein':'']">
				<scroll-view class="scroll-view " :scroll-y="true" @scrolltolower="getOrderList(false)" >
					<view class="goods-item " v-for="(row,ii) in  orderItem.listData" :key="ii">
						<view class="flex goods-head">
							<view class="time">2019-10-02 11:12:12</view>
							<view class="status">活动中</view>
						</view>
						<view class="goods-cont">
							<view class="goods-img flex0"><image :src="row.goods_thumb" mode=""></image></view>
							<view class="goods-right">
								<view class="goods-name text_over2">{{row.goods_name}}</view>
								<view class="spec-text"> 规格：{{row.attr_value_str}}</view>
								<view class="goods-price"><text class="dis-price">￥{{row.goods_amount}}</text><text class="market-price">￥1100</text> </view>
							</view>
							<view class="count">X{{row.goods_num}}</view>
						</view>
						<view class="goods-bottom flex">
							<view class="left-text">剩余****份正在募集中</view>
							<view class="price">总计 <text style="font-size: 22upx;">￥</text><text>12</text></view>
						</view>
						<view class="result">
							<view class="btn" v-if="row.order_status==0" @click="buyMore">追加份数</view>
							<view class="text" v-else-if="row.order_status==1">您此次未被抽中</view>
							<view class="text active"  v-else-if="row.order_status==5">恭喜您，您已获得此商品的五折优惠</view>
						</view>
					</view>
					<load-more :listnull="orderItem.listnull" :loadtype="orderItem.loadtype" :text2="orderItem.text2" ref="loadmore">
						<block slot="null">
							<view>没有数据哦</view>
						</block>
					</load-more>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	var that;
	import loadMore from '@/components/load-more.vue';
	export default {
		data() {
			return{
				headerPosition: "relative",
				headerTop: "0px",
				orderType: [{id:0,name:'全部'}, {id:1,name:'活动中'},{id:2,name:'已抽出'}],
				tabbarIndex: 0,
			}
		},
		onLoad(){
			that = this;
			this.tabInit();
			//兼容H5下排序栏位置
			// #ifdef H5
			let Timer = setInterval(() => {
				let uniHead = document.getElementsByTagName('uni-page-head');
				if (uniHead.length > 0) {
					this.headerTop = uniHead[0].offsetHeight + 'px';
					clearInterval(Timer); //清除定时器
				}
			}, 1);
			// #endif
		},
		onShow() {
			
		},
		methods:{
			buyMore(){
				uni.navigateTo({
					url:"/pages/goods/disgoods?id=1"
				})
			},
			tabInit(){
				let orderType = this.orderType;
				orderType.forEach(item=>{
					item.listData = [];
					item.loadtype = 0;  //加载更多 0加载前，1加载中，2没有更多了
					item.refreshing = 0;
					item.listnull=false;
					item.listLen=6;
					item.text2=""
					item.page=1;
					item.loaded=false
				})	
				that.orderType=orderType;
				that.getOrderList(true)
			},
			getOrderList(isReload){
				let tabindex=this.tabbarIndex;
				let list=this.orderType[tabindex];
				let tabid=list.id;
				if(isReload){
					list.listData=[];
					list.loadtype=0;
					list.listnull=false;
					list.page=1;
				}
				if (list.loadtype==2||list.loadtype==1) { return; }
				this.$https.POST({
					url:"/order/orderLists",
					data:{
						status: tabindex,page:list.page
					},
					success(res){
						list.loadtype=1;
						let nowlistData=list.listData;
						res.data.forEach((item,index)=>{
							that.initData(item)
						})
						let listData=nowlistData.concat(res.data)
						list.listData=listData;
						++list.page;
						if(list.listData.length==0&&res.data.length==0){
							list.listnull=true
						}
						if(list.listData.length>0&&res.data.length<10){
							if(list.listData.length<=list.listLen){
								list.text2=" ";
							}
							list.loadtype=2;
						   list.loadtype=2;
						   that.$set(that.orderType,tabindex,list)
						   return;
						}
						that.$set(that.orderType,tabindex,list)
						list.loadtype=0;
					}
				})
			},
			showType(tbIndex) {
				this.tabbarIndex = tbIndex;
				// this.getOrderList(true)
			},
			changeTab(e){
				this.tabbarIndex =  e.detail.current;
				// this.getOrderList(true)
			},
			initData(orderData){
			}
		},
		watch:{
			tabbarIndex(newValue,oldValue){
				if(newValue!=oldValue){
					this.getOrderList(true)
				}
			}
		},
		components:{
			loadMore
		}
	}
</script>

<style lang="scss" scoped>
	.page-body{background: #f5f5f5;}
	.topTabBar {
		width: 100%;
		background-color: #fff;
		height: 80upx;
		display: flex;
		justify-content: space-around;
		.grid {
			height: 80upx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #444;
			font-size: 28upx;
			.text {
				height: 76upx;
				display: flex;
				align-items: center;
				&.on {
					color: $maincolor;
					border-bottom: solid 4upx $maincolor;
				}
			}
		}
	}
	.swiper-box{height: calc( 100vh - 80upx - 44px);}
	.scroll-view{height: 100%;}
	.goods{
		.goods-item{
			padding:10upx 25upx 0;box-sizing: border-box;	background: #fff;margin-top: 20rpx;	
			.goods-head{
				background: #fff;justify-content: space-between;height: 80upx;line-height: 80upx;
				.time{}
				.status{color: $maincolor;}
			}
			.goods-cont{display: flex;}
			.goods-img{
				width:150upx ;height: 150upx; border:1px solid #f3f3f3;
				image{width: 100%;height: 100%;}
			}
			.goods-right{
				margin-left: 26upx;color: #333333;width: 500upx;position: relative;
				.goods-name,.spec-text{padding-top: 6upx;}
				.goods-price{
					position: absolute;left: 0;bottom: 0;
					.dis-price{color: $maincolor;margin-right: 10upx;font-size: 30upx;}
					.market-price{
						position: relative;font-size: 24upx;color: #777;
						&::after{
							content: "";
							display: block;
							height: 1px;
							width: 105%;
							background: #807c87;
							position: absolute;
							top: 50%;
							left: 0;
						}
					}
				}
				.spec-text{color: #999;font-size: 24upx;}
			}
			.count{align-self: flex-start;padding-top: 6upx;color: #999;}
			.goods-bottom{
				justify-content: space-between;height: 80rpx;line-height: 80rpx;border-top:1px solid #efefef;margin-top: 20upx;
				.price{
					text{color: $maincolor;font-size: 30upx;}
				}
			}
			.result{
				text-align: center;padding-bottom: 20upx;height: 60upx;line-height: 60upx;
				.btn{border:1px solid $maincolor ;width: 200upx;border-radius: 35upx;color: $maincolor;font-size: 30upx;margin: 0 auto;}
				.text{font-size: 28rpx;}
				.text.active{color: $maincolor;}
			}
		}
		.total{line-height: 80upx;height: 80upx;border-top: 1px solid #f3f3f3;text-align: right;padding-right:25upx ;
			text{font-size: 34upx;}
		}
	}
</style>
